<!DOCTYPE html>
<html>
<head>
    <title>Bean View: ${beanName}</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="${rootPath}/static/css/bootstrap.min.css"/>
    <style type="text/css">
        /* 表格内容垂直居中 */
        td {
            vertical-align: middle !important;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="well">
            <p>Bean Name: <a href="${url}">${beanName}</a></p>
            <p>Bean Class: <span>${beanClass}</span></p>
            <p>Bean Value: <span>${beanValue}</span></p>
        </div>
    </div>
    <!-- search area -->
    <div class="container">
        <form method="get" class="form-inline beanSearchForm">
            <div class="form-group">
                <input class="form-control" type="text" name="beanName" placeholder="bean name" style="width: 500px;"/>
            </div>
            <input class="btn btn-default" type="submit" value="Search"/>
        </form>
    </div>
    <!-- properties area -->
    <div class="container-fluid" v-if="properties">
        <properties-view :properties="properties" />
    </div>
    <!-- methods area -->
    <div class="container-fluid" v-if="methods">
        <methods-view :methods="methods"/>
    </div>
</div>

<script type="text/javascript" src="${rootPath}/static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="${rootPath}/static/js/vue.js"></script>


<script type="text/javascript">
// initialize common variable.
var staticUrlPrefix = "${rootPath}/static/";
var searchUrlPrefix = "${rootPath}/search/";
var initState = {
	properties: ${properties},
	methods: ${methods}
};

var testState = {
    properties: [
        {
            "name":"LOGGER_NAME",
            "type":"java.lang.String",
            "url":"mbean/beansService?propertyName=LOGGER_NAME&contextId=application",
            "value":{
                "toString":"my.mbean.service.BeansService"
            },
            "annotationMarks":[

            ],
            "source":"FIELD"
        },
    ],
    methods: [
    ]
};

// define componet.
Vue.component('total', {
    props: ['total'],
    template: '<span>Total: {{total}}</span>'
});

if (document.getElementById('property-value-template')) {
    Vue.component('prop-value', {
        props: ['value', 'prop'],
        template: '#property-value-template',
    });
} else {
    Vue.component('prop-value', function(resolve, reject) {
        $.get(staticUrlPrefix + "fragment/property-value.html").then(function (resp) {
            resolve({
                props: ['value', 'prop'],
                template: resp,
            })
        });
    });
}



Vue.component('properties-view', document.getElementById('properties-view-template') ? {
    props: ['properties'],
    template: '#properties-view-template'
} : function (resolve, reject) {
    $.get(staticUrlPrefix + "fragment/properties-view.html").then(function (resp) {
        resolve({
            props: ['properties'],
            template: resp,
        })
    });
});

Vue.component('methods-view', function(resolve, reject) {
    $.get(staticUrlPrefix + "fragment/methods-view.html").then(function (resp) {
        resolve({
            props: ['methods'],
            template: resp,
        })
    });
});



var app = new Vue({
    el : '#app',
    data : function() {
        if (initState) return initState;
        else return testState;
    },
    // template: '#app-template',
    components: {
//        'app': {
//            props: ['properties', 'methods'],
//            template: '#app-template'
//        }
    },
    computed: {
    },
    methods: {
    }
});


// 按下alt+k 后聚焦到 搜索 bean 的输入框.
$(document).keyup(function(e) {
    // 'k' = 75
    const KEY_COED_K = 75;
    if (e.altKey && e.keyCode == KEY_COED_K) {
        var $kwInput = $('.beanSearchForm input[name=beanName]');
        var v = $kwInput.val();
        $kwInput.val('').focus().val(v).select();
    }
});
// 当焦点在 搜索bean的输入框时 按下 ESC 失去焦点.
$('.beanSearchForm input[name=beanName]').keyup(function(e) {
    e.preventDefault();
    const KEY_CODE_ESC = 27;
    if (e.keyCode == KEY_CODE_ESC) {
        $(this).blur();
    } else if (e.keyCode == 13) {
        var beanNameLike = $('.beanSearchForm input[name=beanName]').val();
        if (!beanNameLike) return;
        window.location.href = searchUrlPrefix + beanNameLike;
    }
    return false;
});

$('.beanSearchForm').submit(function (e) {
    var beanNameLike = $('.beanSearchForm input[name=beanName]').val();
    if (!beanNameLike) return;
    window.location.href = searchUrlPrefix + beanNameLike;
    return false;
})
</script>
</body>
</html>